<template>
  <!-- 头部 -->
  <div class="header">
    <Breadcrumb></Breadcrumb>
    <div class="form">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="预定编号">
          <el-input v-model="formInline.name" placeholder="预定编号" clearable />
        </el-form-item>
        <el-form-item label="预定时间">
          <el-date-picker v-model="formInline.date" type="date" placeholder="选择时间" clearable />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :icon="Search">查询</el-button>
          <el-button type="primary">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="group">
      <el-button type="warning">订单导出</el-button>
    </div>
  </div>
  <!-- 表格 -->
  <div class="content">
    <el-table :data="tableData" border style="width: 100%" header-row-class-name="active-header">
      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column prop="orderNum" label="汇总单编号">
      </el-table-column>
      <el-table-column prop="operator" label="汇总人">
      </el-table-column>
      <el-table-column prop="phone" label="联系电话">
      </el-table-column>
      <el-table-column prop="time" label="汇总时间">
        <template #default="scope">
          {{ dayjs(scope.row.yudingTime).format('YYYY-MM-DD HH:mm:ss') }}
        </template>
      </el-table-column>
      <el-table-column prop="totalPrice" label="汇总单总价格">
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="danger" @click="handleEdit(scope.$index, scope.row)">撤销汇总</el-button>
        </template>
      </el-table-column>
    </el-table>
    <Pagination class="page" :total="total" :pageSize="pageSize" @CurrentChange="CurrentChange" />
  </div>
</template>

<script setup>
import { onMounted, ref, reactive, getCurrentInstance, computed } from 'vue';
import { useRoute, useRouter } from 'vue-router';
const router = useRouter()
//全局导入
const cxt = getCurrentInstance()
const API = cxt.appContext.config.globalProperties.$API
import { Search } from '@element-plus/icons-vue'
import dayjs from 'dayjs'//全局引入时在app原型上挂载
//搜索
const formInline = reactive({
  name: '',
  date: '',
})
onMounted(() => {
  collect()
})
//请求汇总清单列表
const tableData = reactive([])
const total = ref(10)
const pageSize = ref(1)
const collect = async (page) => {
  const result = await API.collect({ page })
  // console.log(result);
  if (result.status == 200) {
    tableData.splice(0, tableData.length);
    tableData.push(...result.data)
    total.value = result.total
    pageSize.value = result.pageSize
  } else {
    console.log('collect获取失败');
    tableData.splice(0, tableData.length);
    total.value = 0
    pageSize.value = 0
  }
}

//处理分页器
const Current = ref('')
const CurrentChange = (page) => {
  Current.value = page
  collect(page)
}

//撤销汇总
const handleEdit = (index, row) => {
  ElMessageBox.confirm(
    '此操作将永久删除该文件, 是否继续?',
    '提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
      center: true,
    }
  )
    .then(async () => {
      // console.log(index,row);
      let result = await API.cancel({ id:row.id })
      // console.log(result);
      if (result.status == 200) {
        ElMessage({
          type: 'success',
          message: '撤销成功',
        })
        collect(Current.value)
      }
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消撤销',
      })
    })
}
</script>

<style lang="less" scoped>
.header {
  background: #fff;
  margin-bottom: 20px;
  padding: 10px;

  .demo-form-inline {
    .el-form-item {
      margin-right: 20px;
      margin-bottom: 16px;

      .el-input {
        --el-input-width: 220px;
      }
    }
  }

  .group {
    padding: 10px;
    border: 1px solid #eee;
  }
}

.content {
  background: #fff;

  :deep(.active-header) {
    color: #333
  }

  :deep(.el-table__cell) {
    text-align: center;
  }

  .page {
    padding: 20px;
  }
}
</style>